nav-v {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	background: var(--bkg-40);

	padding-top: 2rem;
	
	header {

		display: grid;
		grid-template-columns: 1fr 2rem;
		grid-template-rows: 2rem;
		align-items: center;


		label {
			padding-left: 1rem;
			color: var(--txt);
			font-weight: 400;
			font-size: 1rem;
			display: flex;
			align-items: center;
		}

		c-ico {
			width: 1.25rem;
			height: 1.25rem;
		}
	
		project-new-ipt {
			grid-column: 1/3;
			margin: 1rem .5rem;

			d-input::part(ctrl) {
				width: 100%;
			}
		}
	}


	section {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: .5rem;
		a {
			cursor: pointer;
			padding: .5rem;
			padding-left: 1rem;
			border-left: solid 4px rgba(0,0,0,0);
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;


			&.sel, &:hover {
				background: var(--bkg-sel);
			}

			&:active {
				background: var(--bkg-pressed);
			}

			&.sel {
				border-left: solid 4px var(--bdr-sel);
				font-weight: 600;
			}
		}
	}


	menus {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: .5rem;
		a {
			cursor: pointer;
			padding: .5rem;
			padding-left: 1rem;
			border-left: solid 4px rgba(0,0,0,0);
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;


			&.sel, &:hover {
				background: var(--bkg-sel);
			}

			&:active {
				background: var(--bkg-pressed);
			}

			&.sel {
				border-left: solid 4px var(--bdr-sel);
				font-weight: 600;
			}
		}
	}
}

c-nav-item {
	display: grid;
}